<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同学历的女性数量</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/vintage.js"></script>
</head>
<body>
<div class="cart" style="height: 600px;width: 800px;margin: auto"></div>
<script>
    var edu_level_count_data = {{ edu_level_count_data|tojson }}
    var MyCharts = echarts.init(document.querySelector('.cart'),'vintage')
    var option = {
        title:{
            text:'不同学历的女性数量',
            textStyle:{
                fontSize:21,
                fontFamily:'楷体'
            },
            top:10,
            left:10
        },
        legend:{
            name:['人数'],
            left:20,
            bottom:20,
            orient:'vertical',
            itemWidth:40,
            itemHeight:20
        },
        tooltip:{
            trigger:'item',
            triggerOn:'mousemove',
            formatter:function(arg)
            {
                return '学历：'+arg.name+'<br/>'+'人数：'+arg.value+'<br/>'+'占比：'+arg.percent+'%'
            }
        },
        series:[
            {
                type:'pie',
                data:edu_level_count_data,
                name:'数量',
                label:{
                    show:true,
                },
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                labelLine: {
                show: false
                },
                roseType:'radius', // 南丁格尔图玫瑰图
                {#radius:['50%','80%'],#}
                selectedMode:'multiple',
                selectedOffset:20
            }
        ]
    }
    MyCharts.setOption(option)
</script>
</body>
</html>